import { Component, EventEmitter, Injector, Output, ViewChild } from '@angular/core';
import { ISelectionUnitBackData } from '@app/shared/common/workflow/workflow-common-interface';
import { SelectionUnitBoxModalComponent } from '@app/shared/common/workflow/wrokflow-common-component/selection-unit-box.component';
import { AppModalComponentBase } from '@shared/common/app-modal-component-base';
import { HtmlHelper } from '@shared/helpers/HtmlHelper';
import { CreateDesignInput, FlowCategotyDto, NameValue, UpdateDesignInput, WorkflowCustomData, WorkFlowDesignDto, WorkFlowDesignServiceProxy } from '@shared/service-proxies/service-proxies';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { finalize } from 'rxjs/operators';

@Component({
  selector: 'flow-design-detail-modal',
  templateUrl: './flow-design-detail-modal.component.html'
})
export class FlowDesignDetailModalComponent extends AppModalComponentBase {

    @ViewChild('editModal', { static: true }) modal: ModalDirective;
    @Output() FlowDetailModalSave: EventEmitter<any> = new EventEmitter<any>();
    @ViewChild('selectUnitModal',{static: true}) selectUnitModal:SelectionUnitBoxModalComponent;

    saving = false;
    flowWorkId:string = '';
    fields:WorkFlowDesignDto = new WorkFlowDesignDto();
    flowCategory:FlowCategotyDto[] = [];
    functions:NameValue[] = []
    constructor(
        injector: Injector,
        private _workFlowDesignServiceProxy:WorkFlowDesignServiceProxy
    ) {
        super(injector);
        this.fields = new  WorkFlowDesignDto();
        this.fields.customData = new WorkflowCustomData();
    }
    
    show(id: string): void {
        this.flowWorkId = id;
        this.modalExpandOb.resetStates();
        this.fields = new  WorkFlowDesignDto();
        this.fields.customData = new WorkflowCustomData();
        this.flowCategory = [];
        this.functions = [];
        this.modal.show();
        this.init();
    }

    save(){
        if (this.flowWorkId && this.fields.id !== "00000000-0000-0000-0000-000000000000") {
            this.saving = true;
            let updateDesignInput = new UpdateDesignInput();
            Object.assign(updateDesignInput,this.fields);
            updateDesignInput.description = HtmlHelper.htmlEncode(updateDesignInput.description);
            this._workFlowDesignServiceProxy.updateDesign(this.fields).pipe(finalize(()=>{
                this.saving = false
            })).subscribe(result=>{
                abp.notify.success(this.l('SavedSuccessfully'));
                this.saving = false;
                this.FlowDetailModalSave.emit(true);
                this.close();
            })
        }
        else {
            this.saving = true;
            let createDesignInput = new CreateDesignInput();
            Object.assign(createDesignInput,this.fields);
            createDesignInput.description = HtmlHelper.htmlEncode(createDesignInput.description);
            this._workFlowDesignServiceProxy.createDesign(this.fields).pipe(finalize(()=>{
                this.saving = false
            })).subscribe(result=>{
                abp.notify.success(this.l('SavedSuccessfully'));
                this.saving = false;
                this.FlowDetailModalSave.emit(true);
                this.close();
            })
        }
    }

    selectionUnits(){
        this.selectUnitModal.show(this.fields.unitIdList);
    }

    selectUnitBackData(data:ISelectionUnitBackData){
        this.fields.unitIdList = data.ids;
        this.fields.unitNames = data.names;
    }


    init(){
        this._workFlowDesignServiceProxy.getDesign(this.flowWorkId).subscribe(result=>{
            this.fields = result.workFlow;
            this.functions = result.functions;
            this.fields.description = HtmlHelper.htmlDecode(this.fields.description);
        });

        this._workFlowDesignServiceProxy.getAllCategory().subscribe(result=>{
            this.flowCategory = result;
        });
    }

    close(): void {
        this.modal.hide();
    }
}
